<template>
    <div class="home">
        <div class="mouse" :class="{hide: isScrollDown}"></div>
        <section class="home-section" id="home-section">
            <div class="slogan">
                <h2>RENEW YOUR BODY</h2>
                <p class="txt-en">A NEW WAY TO CHANGE YOUR FITNESS LIFE</p>
                <p class="txt-cn">全方位引力自重訓練課程</p>
            </div>
            <div class="button-nav">
                <a :href="configData.button1Url" class="reserve-btn">{{configData.button1Name}}</a>
                <a :href="configData.button2Url" class="free-test">{{configData.button2Name}}</a>
            </div>
        </section>
        <section class="about-section" id="about-section">
            <div class="layout-row cf">
                <div class="content">
                    <h2 class="t-cn">關於我們</h2>
                    <h2 class="t-en">ABOUT RENEW</h2>
                    <div class="content-body">
                        <p v-for="item in configData.aboutUs" :key="item">{{item}}</p>
                    </div>
                </div>
                <ul class="ul">
                    <li class="reset">
                        <a href="#">Reset</a>
                    </li>
                    <li class="relax">
                        <a href="#">Relax</a>
                    </li>
                    <li class="renew">
                        <a href="#">Renew</a>
                    </li>
                </ul>
            </div>
        </section>
        <section class="course-section" id="course-section">
            <h2 class="t-cn">訓練課程</h2>
            <h2 class="t-en">COURSES</h2>
            <div class="carousel-outer layout-row">
                <el-carousel trigger="click" arrow="always" :autoplay="false" indicator-position="none">
                    <el-carousel-item v-for="(itemArr, i) in courseList" :key="itemArr">
                        <div class="item">
                            <ul class="caro-item">
                                <template v-for="(item, j) in itemArr">
                                    <li v-if="item" :key='j' class="course-item">
                                        <img :src="item.firstUrl" alt="">
                                        <router-link @click.native="changePage('訓練課程')" :to="getCourseRouteParam(item)">
                                            <span class="sp-cn">{{item.title}}</span>
                                            <span class="sp-cn">{{item.subTitle}}</span>
                                        </router-link>
                                    </li>
                                    <li v-else :key='j'></li>
                                </template>
                            </ul>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </section>
        <section class="banner-section">
            <p>{{configData.bannerTitle}}</p>
            <a :href="configData.bannerUrl">{{configData.bannerButton}}</a>
        </section>
        <section class="news-section" id="news-section">
            <div class="carousel-outer layout-row">
                <el-carousel trigger="click" arrow="always" :autoplay="false" indicator-position="none">
                    <el-carousel-item v-for="item in newsList" :key="item.id">
                        <div class="item cf">
                            <div class="news-info">
                                <h2 class="t-cn">新聞活動</h2>
                                <h2 class="t-en">NEWS & EVENTS</h2>
                                <h3 class="news-title">{{item.title}}</h3>
                                <p class="news-content" v-html="filterContent(item.content)"></p>
                                <span class="time">{{handleDate(item.createTime)}}</span>
                                <div class="row-more">
                                    <router-link class="more" @click.native="changePage('新聞活動')" :to="getNewsRouteParam(item)">查看更多</router-link>
                                </div>
                            </div>
                            <div class="news-pic">
                                <router-link @click.native="changePage('新聞活動')" :to="getNewsRouteParam(item)">
                                    <div class="img-wrap">
                                        <img :src="item.firstUrl" alt="item.firstUrl">
                                    </div>
                                    <div class="pic-news-info">
                                        <h3 class="news-title">{{item.title}}</h3>
                                        <span class="time">{{handleDate(item.createTime)}}</span>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </section>
        <section class="pic-section" id="pic-section">
            <h2 class="t-cn">圖片與影片</h2>
            <h2 class="t-en">PHOTO & VIDEO</h2>
            <div class="layout-row">
                <div class="media-list cf">
                    <div class="media-item" v-for="(item, index) in mediaList" :key="item.id">
                        <template v-if="testPic(item.fileName)">
                            <img class="img-show" @click="showBigPic(item)" :src="item.filePath" :alt="item.fileName">
                        </template>
                        <template v-else>
                            <video :id="'my-player'+new Date().getTime()" class="video-js vjs-big-play-centered" controls preload="auto" data-setup='{}' width="400" height="220">
                                <source :src="item.filePath" type="video/mp4"></source>
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        </template>
                    </div>
                </div>
            </div>
        </section>
        <section class="contact-section" id="contact-section">
            <div class="layout-row">
                <div class="main-content">
                    <h2 class="t-cn">聯系我們</h2>
                    <h2 class="t-en">HOW TO FIND US</h2>
                    <p class="add-item" v-for="item in configData.contact" :key="item">{{item}}</p>
                    <p class="phone tc">{{phone1}}</p>
                    <p class="phone">{{phone2}}</p>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import {formatDate, groupArray} from 'common/util';
export default {
    name: 'home',
    components: {
    },
    mounted() {
        this.init();
    },
    data() {
        return {
            dialogVisible: false,
            configData: {
                button1Name: '',
                button1Url: '',
                button2Name: '',
                button2Url: '',
                aboutUs: '',
                bannerTitle: '',
                bannerButton: '',
                bannerImage: '',
                bannerUrl: '',
                contact: '',
                phones: ''
            },
            phone1: '',
            phone2: '',
            newsList: [],
            mediaList: [],
            courseList: [],
            columnTree: '',
            isSmallScreen: false
        };
    },
    computed: {
        isScrollDown() {
            return this.$store.getters.isScrollDown;
        }
    },
    methods: {
        init() {
            if (document.documentElement.clientWidth < 768) {
                this.isSmallScreen = true;
            }
            this.$axios('/homepage/getHomePageInfo.do').then(res => {
                Object.assign(this.configData, res.data);
                this.configData.aboutUs = this.configData.aboutUs.split('\n');
                this.configData.contact = this.configData.contact.split('\n');
                let phones = res.data.phones.split(',');
                this.phone1 = phones[0] || '';
                this.phone2 = phones[1] || '';
            });
            this.$axios('/column/getColumnTrees.do').then(res => {
                this.columnTree = res.data;
                // let columnNews = this.getColumnFromTree('新聞資訊');
                this.$axios({
                    url: '/article/getArticlesByColumnId.do',
                    params: {
                        // columnId: columnNews.id,
                        columnId: 12,
                        pageNum: 1,
                        pageSize: 3
                    }
                }).then(res => {
                    this.newsList = res.data.list;
                });
                // let columnCourse = this.getColumnFromTree('訓練課程');
                this.$axios({
                    url: '/article/getArticlesByParentId.do',
                    params: {
                        // id: columnCourse.id
                        id: 2
                    }
                }).then(res => {
                    let subArrayLength = 3;
                    if (this.isSmallScreen) {
                        subArrayLength = 1;
                    }
                    let courseList = groupArray(res.data, subArrayLength);
                    let lastItem = courseList[courseList.length - 1];
                    if (lastItem.length < subArrayLength) {
                        for (let i = 0; i < subArrayLength - lastItem.length; i++) {
                            lastItem.push(null);
                        }
                    }
                    this.courseList = courseList;
                });
            });
            this.$axios({
                url: 'media/getMediasByColumnId.do',
                params: {
                    pageNum: 1,
                    pageSize: 6
                }
            }).then(res => {
                this.mediaList = res.data.list;
                this.$nextTick(() => {
                    $('.video-js').each(function () {
                        window.videojs($(this).attr('id'), {});
                    });
                });
            });
        },
        getColumnFromTree(columnName) {
            function getColumn(columnName, array) {
                let result = false;
                array.every(item => {
                    if (item.columnName === columnName) {
                        result = item;
                        return false;
                    }
                    if (item.children && item.children.length > 0) {
                        result = getColumn(columnName, item.children);
                        if (result !== false) {
                            return false;
                        }
                    }
                    return true;
                });
                return result;
            }
            return getColumn(columnName, this.columnTree) || {};
        },
        getNewsRouteParam(item) {
            let column = this.getColumnFromTree('新聞活動');
            return {
                path: 'top-column',
                query: {
                    id: column.id,
                    articleId: item.id,
                    articleColumnId: item.columnId
                }
            };
        },
        getCourseRouteParam(course) {
            let topColumnId = 2;
            return {
                path: 'top-column',
                query: {
                    id: topColumnId,
                    articleId: course.id,
                    articleColumnId: course.columnId
                }
            };
        },
        filterImageName(str) {
            return str.match(/(\/[^\/]*\..*)/)[1];
        },
        filterContent(str) {
            return str.replace(/\<.*?\>/g, '');
        },
        testPic(str) {
            return /\.(jpg|gif|png)$/.test(str.toLowerCase());
        },
        handleDate(timestamp) {
            return formatDate(new Date(timestamp), 'yyyy-MM-dd');
        },
        changePage(name) {
            this.$trigger('changePage', name);
        }
    }
};
</script>

<style lang="less">
@font-face {
    font-family: Kristi;
    font-style: normal;
    font-weight: 400;
    src: local('Kristi'), url('/assets/fonts/Kristi.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.t-cn {
    font: 36px/40px "LiHei Pro", "Microsoft YaHei";
}

.t-en {
    margin: 18px 0 50px;
    font: 24px/26px 'Raleway Medium', "Microsoft YaHei";
    color: #9b9a9b
}

.home-section {
    background: #7f7f7e url('/assets/imgs/bg-top.png') no-repeat 50% 0;
    height: 900px;

    .slogan {
        text-align: center;
        color: #fff;

        h2 {
            margin-top: 0;
            padding-top: 230px;
            font: 190px/200px Kristi, 'Nixie One', Raleway, "Helvetica Neue", Helvetica;
        }

        .txt-en {
            padding-top: 10px;
            font: 37px/40px 'Raleway Medium', "Microsoft YaHei";
        }

        .txt-cn {
            padding-top: 25px;
            font: 48px/50px "LiHei Pro", "Microsoft YaHei";
        }
    }

    .button-nav {
        text-align: center;
        position: relative;
        margin-top: 50px;
        a {
            width: 194px;
            height: 52px;
            border: 4px solid #696663;
            display: inline-block;
            border-radius: 30px;
            font: 24px/46px "Microsoft YaHei", "黑体";
            color: #fff;
            &:hover {
                text-decoration: none;
            }
        }
    }
    .reserve-btn:hover {
        background: #93cc4a;
    }

    .free-test {
        margin-left: 45px;
        &:hover {
            background: #46B7EB;
        }
    }
}

@media only screen and (max-width:767px) {
    .home-section {
        background-size: cover;
        height: 550px;
        .slogan {
            text-align: center;
            color: #fff;
            h2 {
                padding-top: 180px;
                font: 72px/80px Kristi, 'Nixie One', Raleway, "Helvetica Neue", Helvetica;
            }
            .txt-en {
                padding-top: 10px;
                font: 12px/14px 'Raleway Medium', "Microsoft YaHei";
            }
            .txt-cn {
                padding-top: 25px;
                font: 16px/18px "LiHei Pro", "Microsoft YaHei";
            }
        }
        .button-nav {
            text-align: center;
            position: relative;
            margin-top: 50px;
            a {
                width: 160px;
                height: 40px;
                border: 4px solid #696663;
                border-radius: 20px;
                font: 18px/36px "Microsoft YaHei", "黑体";
            }
        }
        .free-test {
            margin-left: 10px;
        }
    }
}

@media only screen and (min-width:768px) and (max-width:1142px) {
    .home-section {
        .slogan {
            h2 {
                font-size: 160px;
            }
            .txt-en {
                font-size: 34px;
            }
        }
    }
}

@media only screen and (min-width:1441px) {
    .home-section {
        background: #7f7f7e url('/assets/imgs/bg-top.png') no-repeat 50% 0;
        background-size: cover
    }
}


.about-section {
    background: #595e65 url('/assets/imgs/bg-about.png') no-repeat 50% 0;
    height: 482px;
    .layout-row {
        color: #fff;
        width: 1140px;
        height: 100%;
        display: flex;
        position: relative;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        .content {
            width: 500px;
            margin-right: 50px;
        }
        .content-body {
            p+p {
                margin-top: 24px;
            }
        }
        .ul {
            flex: 1;
            display: flex;
            justify-content: space-between;
            a {
                color: #fff;
            }
            li {
                width: 178px;
                height: 187px;
                border: 1px solid #999b9e;
                box-sizing: border-box;
                padding-top: 108px;
                font: 28px/70px "Microsoft YaHei", "黑体";
                text-align: center;
            }
            .t-en {
                margin-bottom: 40px;
            }
            .reset {
                background: url('/assets/imgs/icon-reset.png') no-repeat 50% 38px;
            }
            .relax {
                background: url('/assets/imgs/icon-relax.png') no-repeat 50% 38px;
            }
            .renew {
                background: url('/assets/imgs/icon-renew.png') no-repeat 50% 38px;
            }
        }
    }
    h2 {
        text-align: center;
    }
    .mt30 {
        margin-top: 30px;
    }
}

@media only screen and (min-width:768px) and (max-width:1142px) {
    .about-section {
        background: #595e65 url('/assets/imgs/bg-about.png') repeat-y 50% 0;
        height: auto;
        .layout-row {
            width: auto;
            padding-left: 0;
            .content {
                position: static;
                margin: 30px auto 0;
                width: 720px;
            }
            .ul {
                max-width: none;
                width: 720px;
                margin: 40px auto 0;
                padding-bottom: 80px;
            }
        }
    }
}

@media only screen and (max-width:767px) {
    .about-section {
        background: #595e65 url('/assets/imgs/bg-about.png') repeat-y 50% 0;
        height: auto;
        .layout-row {
            color: #fff;
            width: auto;
            padding: 70px 20px;
            text-align: justify;
            position: relative;
            flex-direction: column;
            .content {
                position: static;
                width: auto;
                margin-right: 0;
            }
            .ul {
                width: 100%;
                margin-top: 40px;
                display: flex;
                justify-content: space-between;
                a {
                    color: #fff;
                }
                li {
                    flex: 1;
                    height: 187px;
                    border: 1px solid #999b9e;
                    box-sizing: border-box;
                    padding-top: 108px;
                    font: 28px/70px "Microsoft YaHei", "黑体";
                    text-align: center;
                    &:hover {
                        background-color: rgba(255, 255, 255, .3);
                    }
                }
                .reset {
                    background: url('/assets/imgs/icon-reset.png') no-repeat 50% 38px;
                }
                .relax {
                    background: url('/assets/imgs/icon-relax.png') no-repeat 50% 38px;
                }
                .renew {
                    background: url('/assets/imgs/icon-renew.png') no-repeat 50% 38px;
                }
            }
        }
        h2 {
            text-align: center;
        }
        .mt30 {
            margin-top: 30px;
        }
    }
}

.course-section {
    height: 665px;
    background: url('/assets/imgs/bg-course.png') no-repeat 50% 0;
    .carousel-outer {
        margin: 0 auto;
    }
    .el-carousel {
        padding: 0 80px;
    }
    .el-carousel__container {
        height: 360px;
    }
    .el-carousel__item {
        height: 360px;
    }
    .el-carousel__arrow--left {
        left: -50px;
    }
    .el-carousel__arrow--right {
        right: -50px;
    }
    .course-section {
        .glyphicon-chevron-left {
            left: -50px!important;
        }
        .glyphicon-chevron-right {
            right: -50px!important;
        }
    }
    .carousel-control {
        background: none!important;
        width: 0;
    }
    .carousel-indicators {
        bottom: -48px;
        li {
            border-color: transparent;
            background: #cecece;
        }
        .active {
            background: #225590;
            border-color: #225590;
        }
    }
    .glyphicon-chevron-right {
        background: url('/assets/imgs/icon-right-normal.png') no-repeat;
        width: 56px!important;
        height: 56px!important;
        display: block;
        right: -70px!important;
        &:before {
            content: ' ';
        }
        &:hover {
            background: url('/assets/imgs/icon-right-hover.png') no-repeat;
        }
    }
    .glyphicon-chevron-left {
        background: url('/assets/imgs/icon-left-normal.png') no-repeat;
        width: 56px!important;
        height: 56px!important;
        display: block;
        left: -70px!important;
        &:before {
            content: ' ';
        }
        &:hover {
            background: url('/assets/imgs/icon-left-hover.png') no-repeat;
        }
    }
    .t-cn {
        padding-top: 70px;
        color: #4a494a;
    }
    h2 {
        text-align: center;
    }
    .carousel-outer {
        max-width: 1140px;
    }
    .caro-item {
        display: flex;
        justify-content: space-between;
        max-width: 1210px;
        li {
            width: 280px;
            height: 360px;
        }
        .course-item {
            box-sizing: border-box;
            position: relative;
            color: #fff;
            font-family: "LiHei Pro", "Microsoft YaHei";
            background-color: rgba(0, 0, 0, 0.7);
            a {
                width: 100%;
                height: 100%;
                padding-top: 270px;
                display: inline-block;
                color: #fff;
                position: absolute;
            }
            img {
                position: absolute;
                width: 100%;
            }
            span {
                display: block;
                padding: 0 20px;
                line-height: 20px;
            }
            .sp-cn {
                line-height: 24px;
                font-size: 20px;
                height: 35px;
                &:before {
                    background: url('/assets/imgs/icon-arraw-white.png');
                    width: 24px;
                    height: 24px;
                    display: inline-block;
                    content: ' ';
                    margin-right: 6px;
                    vertical-align: top;
                }
            }
            .sp-en {
                font-size: 18px;
                opacity: .8;
            }
        }
        .balance {
            width: 250px;
            height: 460px;
            background: url('/assets/imgs/bg-Balance.png') no-repeat;
            background-size: cover;
        }
        .energy {
            width: 280px;
            height: 460px;
            background: url('/assets/imgs/bg-Total-Energy.png') no-repeat;
            background-size: cover;
        }
        .HiiT {
            width: 280px;
            height: 460px;
            background: url('/assets/imgs/bg-Total-HiiT.png') no-repeat;
            background-size: cover;
        }
        .total-body {
            width: 280px;
            height: 460px;
            background: url('/assets/imgs/bg-Total-Body.png') no-repeat;
            background-size: cover;
        }
        .total-pilates {
            width: 280px;
            height: 460px;
            background: url('/assets/imgs/bg-Gravity-Pilates.png') no-repeat;
            background-size: cover;
        }
        .gravity {
            width: 280px;
            height: 460px;
            background: url('/assets/imgs/course1.png') no-repeat;
            background-size: cover;
        }
        .rehab {
            width: 250px;
            height: 460px;
            background: url('/assets/imgs/course2.png') no-repeat;
            background-size: cover;
        }
        .personal {
            width: 280px;
            height: 460px;
            background: url('/assets/imgs/course3.png') no-repeat;
            background-size: cover;
        }
        .pilates {
            width: 250px;
            height: 460px;
            background: url('/assets/imgs/course4.png') no-repeat;
            background-size: cover;
        }
        .reservation {
            width: 133px;
            height: 40px;
            box-sizing: border-box;
            border: 2px solid #fff;
            line-height: 36px;
            display: block;
            font-size: 20px;
            color: #fff;
            border-radius: 20px;
            text-align: center;
            margin: 95px auto 0;
            text-decoration: none;
            &:hover {
                background: #f6a623;
                border-color: #f6a623;
            }
        }
    }
}

.banner-section {
    padding-top: 70px;
    box-sizing: border-box;
    background: #6c7279 url('/assets/imgs/banner.png') no-repeat 50% 0;
    height: 302px;
    p {
        width: 622px;
        height: 92px;
        box-sizing: border-box;
        font: 36px/92px "LiHei Pro", "Microsoft YaHei";
        margin: 0 auto;
        color: #fff;
        text-align: center;
    }
    a {
        display: block;
        border: 1px solid #fff;
        width: 160px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        margin: 30px auto 0;
        text-align: center;
        color: #fff;
        text-decoration: none;
        &:hover {
            background: #f6a623;
            color: #fff;
            text-decoration: none;
        }
    }
}

@media screen and (max-width:1300px) and (min-width:1063px) {
    .course-section .glyphicon-chevron-left {
        left: 20px!important
    }
    .course-section .glyphicon-chevron-right {
        right: 20px!important
    }
}

@media only screen and (max-width:767px) {
    .course-section {
        height: auto;
        background: url('/assets/imgs/bg-course.png') repeat-y 50% 0;
        .carousel-control {
            display: none;
        }
        .carousel-indicators {
            display: none;
        }
        .t-cn {
            padding-top: 70px;
            color: #4a494a;
        }
        .carousel-outer {
            max-width: none;
            min-width: 0;
        }
        .caro-item {
            display: block;
            max-width: none;
            min-width: 0;
            li {
                margin: 20px auto;
                width: 280px!important;
            }
        }
    }
    .banner-section {
        padding-top: 90px;
        box-sizing: border-box;
        background: #6c7279 url('/assets/imgs/banner.png') no-repeat 50% 0;
        height: 302px;
        p {
            width: auto;
            height: 60px;
            box-sizing: border-box;
            margin: 0 20px;
            font: 18px/60px "LiHei Pro", "Microsoft YaHei";
            color: #fff;
            text-align: center;
        }
        a {
            display: block;
            border: 1px solid #fff;
            width: 160px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 30px auto 0;
            text-align: center;
            color: #fff;
            text-decoration: none;
            &:hover {
                background: #f6a623;
                color: #fff;
                text-decoration: none;
            }
        }
    }
}

@media only screen and (min-width:768px) and (max-width:1142px) {
    .course-section {
        width: 100%;
        overflow: hidden
    }
}
.news-section {
    height: 520px;
    .row-more {
        text-align: right;
        padding-right: 40px;
    }
    .more {
        display: inline-block;
        background: #4490db;
        color: #fff;
        border-radius: 20px;
        padding: 7px 20px;
    }
    .el-carousel__container {
        height: 520px;
    }
    .item.cf {
        height: 100%;
    }
    .news-info {
        height: 100%;
        width: 50%;
        float: left;
        background: url(/assets/imgs/bg-news.png) no-repeat center center;
    }
    .news-pic {
        float: left;
        height: 100%;
        width: 50%;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .pic-news-info {
        display: none;
    }
    .news-title, .news-content, .time {
        padding-left: 140px;
        padding-right: 40px;
    }
    .news-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .news-content {
        color: #333;
        line-height: 24px;
        margin-bottom: 20px;
        max-height: 170px;
        overflow: hidden;
    }
    .time {
        color: #333;
    }
    .t-cn {
        padding-top: 70px;
        color: #4a494a;
    }
    h2 {
        text-align: center;
    }
}
@media only screen and (max-width:767px) {
    .news-section {
        height: 350px;
        text-align: center;
        .el-carousel__container {
            height: 350px;
        }
        .news-pic {
            width: 100%;
            float: none;
        }
        .news-info {
            display: none;
        }
        .pic-news-info {
            display: block;
        }
        .img-wrap {
            max-height: 400px;
            overflow: hidden;
        }
        .news-title, .time {
            padding: 0;
        }
    }
}
.pic-section {
    background: url(/assets/imgs/bg-pic.png) no-repeat center center;
    padding-bottom: 80px;
    .media-list {
        width: 1200px;
        margin: 0 auto;
    }
    .media-item {
        float: left;
        width: 400px;
        height: 220px;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .t-cn {
        padding-top: 70px;
        color: #fff;
    }
    h2 {
        text-align: center;
    }
}
@media only screen and (max-width:767px) {
    .pic-section {
        background-size: cover;
        .media-list {
            width: 100%;
        }
        .media-item {
            float: none;
            width: 100%;
            padding: 0 20px;
            margin-bottom: 20px;
        }
    }
}
.contact-section {
    height: 740px;
    background: url('/assets/imgs/bg-contact.png') no-repeat 50% 0;
    overflow: hidden;
    .main-content {
        margin-left: 180px;
        width: 500px;
        height: 742px;
        background: #fff;
        box-shadow: 0 0 1px 1px #ccc;
        box-sizing: border-box;
        padding: 70px 50px 0;
        p {
            margin-top: 10px;
            font-size: 18px;
            color: #4a494a;
        }
        .tc {
            margin-top: 20px;
        }
        .phone {
            font: 36px/50px "LiHei Pro", "Microsoft YaHei";
            color: #000;
            position: relative;
            padding-left: 50px;
            &:before {
                position: absolute;
                left: 0;
                top: 2px;
                background: url('/assets/imgs/phone.png');
                width: 44px;
                height: 44px;
                content: ' ';
                background-size: cover;
            }
        }
    }
    h2 {
        text-align: center;
    }
    .t-cn {
        color: #4a494a;
    }
    .t-en {
        color: #9b9a9b;
        margin: 18px 0 30px;
    }
}

@media only screen and (max-width:767px) {
    .contact-section {
        height: 740px;
        background: url('/assets/imgs/bg-contact.png') no-repeat 50% 0;
        overflow: hidden;
        .main-content {
            margin: 50px 20px 0;
            height: auto;
            background: #fff;
            box-shadow: 0 0 1px 1px #ccc;
            box-sizing: border-box;
            padding: 50px 20px 20px;
            width: auto;
            p {
                font-size: 17px;
                color: #4a494a;
            }
            .phone {
                font: 34px/50px "LiHei Pro", "Microsoft YaHei";
                color: #000;
                position: relative;
                padding-left: 42px;
                margin-left: 0;
                &:before {
                    position: absolute;
                    left: 0;
                    top: 7px;
                    background: url('/assets/imgs/phone.png');
                    width: 36px;
                    height: 36px;
                    content: ' ';
                    background-size: cover;
                }
            }
        }
    }
}

</style>
